<template>
    <div class="step-category-container-template">
        <div class="control-bar">
            <h3>Campaign / Perks</h3>
            <div class="ope-area">
                <el-button type="success" @click="submitCampaignHandler" class="upper-class ope">SUBMIT</el-button>
            </div>
        </div>
        <div class="container">


            <el-row class="form-area title-container">
                <el-row class="intro" style="padding-top: 26px;">
                    <h2 v-if="peaksList.length > 0">
                        Peaks List
                    </h2>
                    <h2 v-else>
                        You haven't created any perks yet
                    </h2>
                    <p class="sub-header">
                        Perks are incentives offered to backers in exchange for their support. You may edit your perk
                        details until the perk is claimed. Visit the Help Center to learn about different kinds of perks
                        you can offer.

                    </p>

                </el-row>
            </el-row>


            <el-row class="form-area button-area">
                <el-row class="intro" style="padding-top: 26px;">
                    <el-button type="primary" @click="createNewPeakHandler">Create New Peak</el-button>
                </el-row>
            </el-row>


            <el-row v-if="peaksList.length > 0">
                <el-table
                        class="peak-table-list"
                        :data="peaksList"
                        style="width: 720px">
                    <el-table-column
                            label="Visibility"
                            width="180">

                        <template slot-scope="scope">
                            <span v-if="scope.row.isVisible == 1">VISIBLE</span>
                            <span v-else>HIDDEN</span>
                        </template>

                    </el-table-column>
                    <el-table-column
                            prop="title"
                            label="Title"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            label="Price"
                            width="180">
                        <template slot-scope="scope">
                            <span>${{scope.row.price}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="RetailPrice"
                            width="180">
                        <template slot-scope="scope">
                            <span>${{scope.row.retailPrice}}</span>
                        </template>
                    </el-table-column>

                </el-table>
            </el-row>

        </div>

    </div>
</template>

<script>
    import {getToken, setToken, removeToken} from '@/utils/auth'
    import {mapState} from 'vuex'

    export default {
        name: "Story",
        data() {
            return {
                campaignStory: '<p>tell more about campaign</p>',
                uploadHeaders: {}
            }
        }
        ,
        components: {},
        computed: {
            ...mapState({
                'userId': state => state.user.userId,
                'userName': state => state.user.userName,
                'campaignInfo': state => state.campaign.item,
                'peaksList': state => state.campaign.peaksList
            })
        },

        methods: {
            toStep3() {

                var that = this

                this.$store.dispatch('SAVE_CAMPAIGN_INFO', {
                    'mutationName': 'SET_CSTORY',
                    'value': this.campaignStory
                })


                // this.$router.push('/crowd/step3');

                this.$store.dispatch('createNewCampaign', this.campaignInfo).then((res) => {
                }).catch((err) => {
                })

            },

            createNewPeakHandler() {
                this.$router.push({
                    name: "createPeak"
                })
            },
            // 提交整个项目的创建
            submitCampaignHandler() {
                console.log(this.campaignInfo)
                console.log(this.peaksList)

                var queryData = {campaignInfo: this.campaignInfo, peaksList: this.peaksList}

                this.$store.dispatch('createNewCampaign', queryData).then((res) => {
                    if(0 == res.code) {
                        this.$message.success("save success")
                        this.$router.push("/explore")
                    }
                }).catch((err) => {
                    console.log(err)
                })
            }
        },
        beforeRouteLeave(to, from, next) {
            // 导航离开该组件的对应路由时调用
            // 可以访问组件实例 `this`
            var that = this
            console.log(this, 'beforeRouteLeave'); //当前组件实例
            $.each(this.peaksList, function (index, item) {
                that.$store.dispatch("EMPTY_PEAK_LIST")
                that.$store.dispatch("ADD_CAMPAIGN_PEAK", item)
            })
            next();
        }
    }
</script>

<style lang="scss" scoped>
    .step-category-container-template {
        .control-bar {
            display: flex;
            justify-content: space-between;
            height: 81px;
            border-bottom: 1px solid rgb(200, 200, 200);
            align-items: center;
            padding: 40px;
            h3 {
                color: #2a2a2a;
                font-weight: bold;
            }
            .upper-class {
                text-transform: uppercase;
            }
            .ope {
                margin: 0 6px;
            }
        }
        .container {
            margin-left: 26px;
            padding: 0 40px;
            margin: 0 auto;
            min-height: 400px;

            .border-div {
                border-top: 1px solid #C8C8C8;
            }

            .peak-table-list {
                margin: 0 auto;
            }

            .title-container {
                text-align: center;
            }

            .intro {
                .sub-header {
                    ont-family: "Benton Sans", "Helvetica", "sans-serif";
                    font-size: 16px;
                    font-weight: normal;
                    letter-spacing: 0;
                    line-height: 24px;
                    margin-bottom: 10px;
                }
            }

            .button-area {
                text-align: center;
                margin-bottom: 26px;
            }

        }
    }
</style>
